<template>
  <div>
    <!-- <h1> C A R </h1> -->

    
    <div class="car_default" v-show="!$store.state.car.length">
      购 物 车 里 空 空 如 也 ～ ～
    </div>


    <transition-group enter-active-class="animated rollIn" leave-active-class=" animated rollOut">
        
        <div class="goods_box bgc" v-for="item in goodsList" :key="item.id">

            <van-checkbox v-model="item.selected" checked-color='#00D000'></van-checkbox>
            <!-- <input type="checkbox"> -->

            <img :src="item.goodsMsg.imgUrl">

            <div class="operating_area">
              <h2>{{item.goodsMsg.name}}</h2>
              <p>
                <span class="red">¥ {{item.goodsMsg.price}}</span>
                <van-stepper v-model="item.count" class="btn" input-width='28' button-size='20'/>
              </p>
            </div>

            <van-button plain hairline type="danger" size='small' @click="deleteGoods(item.id)">删除</van-button>

        </div>

    </transition-group>


      <van-submit-bar
        :price="$store.getters.getTotalCost"
        button-text="提交订单"
        @submit="onSubmit"
        class="settle"
      >
        <van-checkbox v-model="checked" @change="choseAll" checked-color='#00D000' :disabled="flag">全选</van-checkbox>
      </van-submit-bar>



  </div>
</template>

<script>

import Vue from 'vue'

import { Checkbox, CheckboxGroup,Stepper,Button,SubmitBar } from 'vant'

Vue.use(Checkbox).use(CheckboxGroup).use(Stepper).use(Button).use(SubmitBar)

export default {
  data(){
    return{
      goodsList:this.$store.state.car,
      count:1,
      checked:false,
      flag:!this.$store.state.car.length
    }
  },
  methods:{
   
    deleteGoods(id){
      // let i = 0
      this.$store.state.car.some((value,index)=>{
        if(value.id === id){
          // i = index
          this.$store.state.car.splice(index,1)
          return true
        }
      })
    },
    onSubmit(){

    },
    choseAll(){
      if(this.checked){
        let arr = this.$store.state.car
        arr.forEach((item,index)=>{
          this.$store.state.car[index].selected = true
        })
      }
    }
  },
  watch:{
    
  },
  created(){
    
  }

};
</script>

<style lang="less" scoped>

.red{
    color: red
}

.bgc{
    width: 92%;
    background-color: #fff;
    margin: 9px auto;
    box-shadow: 0 0 5px 5px #ccc;
}

.goods_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 6px;
  height: 100px;
  img{
    height: 65%;
  }
  .operating_area{
    width: 50%;
    h2{
      font-size: 10px;
    }
    p{
      font-size: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 25px;
      letter-spacing: 1px;
      font-weight: 700;
    }
  }
}
.settle{
  bottom: 50px;
}

.car_default{
  text-align: center;
  margin-top: 80px;
}



</style>
